<template>
  <div>
    <!--  8.7 根据点击的不同的功能切换不同的标题 -->
    <el-dialog
      :title="info.type === 'add' ? '新增属性' : '编辑属性'"
      :visible.sync="info.isshow"
      width="50%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 角色名称 -->
        <el-form-item label="属性名" prop="specsname">
          <el-input v-model="ruleForm.specsname"></el-input>
        </el-form-item>
        <!-- 添加属性🔴 -->
        <!-- 01. 每次点击创建一个盒子，盒子包含输入框和按钮，第一个按钮是新增属性，第二个往后就是删除按钮。点击添加和删除可以通过数组来控制，所以创建一个数组specsattr -->

        <el-form-item label="属性值" prop="attrs">
          <div v-for="(item, index) in specsattr" :key="index">
            <!-- 01.3 输入框的值绑定的是自身数组的值，不会重复,且正好为空, -->
            <el-input
              v-model="specsattr[index]"
              class="el-specsname"
            ></el-input>
            <!-- 01.2 第一个按钮是新增属性，第二个往后就是删除按钮。通过index进行判断是显示删除还是添加,因为第一个值的下标是0，是undefined，所以当值不是undefined时就是删除 -->
            <el-button v-if="index" type="danger" @click="delspecs(index)"
              >删除属性</el-button
            >
            <el-button v-else type="success" @click="addspecs(index)"
              >添加属性</el-button
            >
          </div>
        </el-form-item>

        <!-- 状态选项 -->
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 结束 -->
        <!--  通过不同的功能创建不同的按钮 -->
        <el-form-item>
          <el-button
            v-if="info.type === 'add'"
            type="success"
            @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button v-else type="primary" @click="submitForm('ruleForm')"
            >立即修改</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
/* 1. 导入菜单列表接口 */
import { specsAdd, specsEdit } from "../../api.js";
export default {
  data() {
    return {
      // 01.1 specsattr用来控制输入框和按钮的数量，默认有一个值，通过对其遍历生成多个或者删除。
      specsattr: [""],
      ruleForm: {
        specsname: "",
        attrs: "",
        status: 1,
      },
      rules: {
        specsname: [{ required: true, message: "请输入标题", trigger: "blur" }],
      },
    };
  },
  props: ["info"],
  created() {},
  methods: {
    // 02.1 添加属性：
    addspecs() {
      // console.log(this.specsattr);
      // 04.在添加时判断该数组的长度不能超过4，即属性不能超过5个
      if (this.specsattr.length < 5) {
        this.specsattr.push("");
      } else {
        this.$message({
          type: "warning",
          message: "属性值最多5个",
        });
      }
    },
    // 03.1 删除属性：
    delspecs(index) {
      // console.log(index);
      this.specsattr.splice(index, 1);
      // console.log(this.specsattr);
    },
    // 给表单赋值
    setValue(info) {
      // 浅拷贝，数据会互相影响
      // this.ruleForm = info;
      // 深拷贝，避免数据互相影响
      /* 把对象中的值解构给另一个新对象再赋值 */
      this.ruleForm = { ...info };
      // 03.2 🔴异常彻底的深拷贝方法
      // this.ruleForm = JSON.parse(JSON.stringify(info));
      // 03.3 🔴数组深拷贝方法
      // console.log(this.ruleForm);
      this.specsattr = [...this.ruleForm.attrs];
      // console.log(this.specsattr);
      /* 将字符串分割成字符串数组 */
    },
    // 验证表单
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let arr = [...this.specsattr];
          // return;
          this.ruleForm.attrs = arr.join(",");
          // return;
          /*  功能分支 */
          if (this.info.type === "add") {
            // 立即创建走创建菜单的接口
            // 02.1
            // console.log(this.ruleForm);
            let res = await specsAdd(this.ruleForm);
            /* 通知list更新 并 渲染数据 */
            this.$emit("updata");
          } else {
            // 走编辑角色的接口
            let res = await specsEdit(this.ruleForm);
          }
          /* 10. 不管点击那个按钮这个弹窗都应该消失 */
          this.info.isshow = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.el-specsname {
  width: 180px;
  margin: 0 10px 15px 0;
}
</style>